<template>
  <el-dialog
    title="导入人员数据"
    v-model="dialogVisible"
    width="400px"
    append-to-body
    destroy-on-close
  >
    <el-upload
      ref="uploadRef"
      :limit="1"
      accept=".xlsx, .xls"
      :headers="upload.headers"
      :action="upload.url"
      :disabled="isUploading"
      :on-progress="handleFileUploadProgress"
      :on-success="handleFileSuccess"
      :auto-upload="false"
      drag
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <template #tip>
        <div class="el-upload__tip">
          <el-button type="primary" link @click="downloadTemplate">下载模板</el-button>
          <span>仅允许导入xls、xlsx格式文件。</span>
        </div>
      </template>
    </el-upload>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="submitUpload" :loading="isUploading">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, watch } from "vue";
import { ElMessage, UploadInstance } from "element-plus";
import { UploadFilled } from "@element-plus/icons-vue";
import { handleApiError } from "@/utils/error-handler";

export default defineComponent({
  name: "PersonnelImport",
  components: {
    UploadFilled
  },
  props: {
    modelValue: {
      type: Boolean,
      required: true
    }
  },
  emits: ["update:modelValue", "success"],
  setup(props, { emit }) {
    const dialogVisible = ref(props.modelValue);
    const uploadRef = ref<UploadInstance>();
    const isUploading = ref(false);

    // 上传配置
    const upload = reactive({
      url: "/api/attendance/personnel/import",
      headers: { Authorization: "Bearer " + localStorage.getItem("token") }
    });

    // 监听visible变化
    watch(
      () => props.modelValue,
      val => {
        dialogVisible.value = val;
      }
    );

    // 监听dialogVisible变化
    watch(
      () => dialogVisible.value,
      val => {
        emit("update:modelValue", val);
      }
    );

    // 下载模板
    const downloadTemplate = () => {
      window.location.href = "/api/attendance/personnel/importTemplate";
    };

    // 取消
    const handleCancel = () => {
      dialogVisible.value = false;
      // 清除上传文件
      if (uploadRef.value) {
        uploadRef.value.clearFiles();
      }
    };

    // 文件上传中
    const handleFileUploadProgress = () => {
      isUploading.value = true;
    };

    // 文件上传成功
    const handleFileSuccess = (response: any) => {
      isUploading.value = false;
      dialogVisible.value = false;

      // 清除上传文件
      if (uploadRef.value) {
        uploadRef.value.clearFiles();
      }

      if (response.code === 200) {
        ElMessage.success(response.msg || "导入成功");
        emit("success");
      } else {
        handleApiError({ response }, response.msg);
      }
    };

    // 提交上传
    const submitUpload = () => {
      if (uploadRef.value) {
        uploadRef.value.submit();
      }
    };

    return {
      dialogVisible,
      uploadRef,
      upload,
      isUploading,
      downloadTemplate,
      handleCancel,
      handleFileUploadProgress,
      handleFileSuccess,
      submitUpload
    };
  }
});
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

:deep(.el-upload-dragger) {
  width: 100%;
}
</style>
